<template>
<div>
    <div class="head">
        <el-row> 
             <el-col :span="3">设备总数：{{this.device_info.length}}</el-col>
             <el-col :span="3">在线设备：{{this.count}}</el-col>
             <el-col :span="18">
                <div class="button">
                    <el-button type="success" plain @click="addTask()">添加设备</el-button>
                </div>
            </el-col>
         </el-row>
    </div>
    <div class="body">
      <el-table :data="device_info" :row-class-name="tableRowClassName" height="100%" style="width: 100%">
        <el-table-column fixed prop="id" label="序号" :index="indexMethod" width="80"></el-table-column>
        <el-table-column prop="name" label="名称" width="100"></el-table-column>
        <el-table-column prop="serial" label="设备序号名" width="150"> </el-table-column>
        <el-table-column prop="type" label="设备类型" width="150"  :filter-multiple="false"
            :formatter="formatName1"
            :filters="[{ text: '测试类型1', value: '1' }, { text: '测试类型2', value: '2' }, { text: '测试单片机', value: '3' }]"  :filter-method="filterHandler1"></el-table-column>
        <el-table-column prop="plugm" label="插件" width="150"></el-table-column>
        <el-table-column prop="status" label="状态" width="150" 
             :filter-multiple="false"
            :formatter="formatName"
            :filters="[{ text: '正常', value: '0' }, { text: '异常', value: '1' }]"  :filter-method="filterHandler" ></el-table-column>
        <el-table-column fixed="right" label="操作" width="220">
           <template slot-scope="scope">
             <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
              <el-dialog title="设备信息" :modal=false :visible.sync="dialogFormVisible">
                <el-form :model="device_db">
                    <el-card class="box-card">
                     <div class="infinite-list" v-infinite-scroll="load">
                       <el-row> 
                        <el-col :span="5">设备ID</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          {{device_db.dev_id}}
                          </template>
                          <template v-else>
                          <el-input v-model="device_db.dev_id" disabled></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">名称</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          {{device_db.name}}
                          </template>
                          <template v-else>
                            <el-input v-model="device_db.name"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">状态</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10" >                         
                          <template v-if='modform'>
                                <template v-if="device_db.status=='0'">
                                正常
                              </template>
                              <template v-else>
                                异常
                              </template>
                          </template>
                          <template v-else>
                             <el-select v-model="device_db.status" placeholder="请选择设备状态">
                               <el-option label="正常" value="0"></el-option>
                               <el-option label="异常" value="1"></el-option>
                               </el-select>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">媒介</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          <template v-if="device_db.media=='1'">
                                ftp服务
                              </template>
                              <template v-else>
                                UDP服务
                              </template>
                          </template>
                          <template v-else>
                          <el-select v-model="device_db.media" placeholder="请选择设备媒介">
                               <el-option label="ftp服务" value="1"></el-option>
                               <el-option label="UDP服务" value="2"></el-option>
                               </el-select>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">序列号</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          {{device_db.serial}}
                          </template>
                          <template v-else>
                          <el-input v-model="device_db.serial"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">位置信息</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          {{device_db.location}}
                          </template>
                          <template v-else>
                          <el-input v-model="device_db.location"></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">设备类型</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          <template v-if="device_db.dev_type=='1'">
                                测试类型1
                              </template>
                              <template v-else-if="device_db.dev_type=='2'">
                                测试类型2
                              </template>
                              <template v-else>
                                测试单片机
                              </template>
                          </template>
                          <template v-else>
                          <el-select v-model="device_db.dev_type" placeholder="请选择设备类型">
                               <el-option label="测试类型1" value="1"></el-option>
                               <el-option label="测试类型2" value="2"></el-option>
                               <el-option label="测试单片机" value="3"></el-option>
                               </el-select>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">导入插件</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          {{device_db.plugm}}
                          </template>
                          <template v-else>
                          <el-input v-model="device_db.plugm" disabled></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">出厂时间</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          {{device_db.time_out}}
                          </template>
                          <template v-else>
                          <el-input v-model="device_db.time_out" disabled></el-input>
                          </template>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">唯一标识符</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <template v-if='modform'>
                          {{device_db.feature}}
                          </template>
                          <template v-else>
                          <el-input v-model="device_db.feature"></el-input>
                          </template>
                        </el-col>
                      </el-row>
         </div> 
          </el-card>
        </el-form>
                <div slot="footer" class="dialog-footer">
                 <template v-if="modform">
                    <el-button type="primary" @click="modform =false">点击修改</el-button>
                </template>
                <template v-else>
                    <el-button type="primary" @click="saveModform()">保存修改</el-button>
                </template>
                <el-button @click="dialogFormVisible = false">返回</el-button>
                </div>
        </el-dialog>
        <el-dialog title="添加设备" :modal=false :visible.sync="dialogFormVisible1">
                <el-form :model="device_db1">
                    <el-card class="box-card">
                     <div class="infinite-list" v-infinite-scroll="load">
                       <el-row> 
                        <el-col :span="5">名称</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                            <el-input v-model="device_db1.name"></el-input>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">状态</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                           <el-select v-model="device_db1.status">
                          <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">位置</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                          <el-input v-model="device_db1.location"></el-input>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">媒介</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                            <el-select v-model="device_db1.media">
                          <el-option v-for="item in optionsmedia" :key="item.id" :label="item.label" :value="item.id"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">阈值</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                            <el-input v-model="device_db1.size"></el-input>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">序列号</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                            <el-input v-model="device_db1.serial"></el-input>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">设备类型</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                            <el-select v-model="device_db1.dev_type">
                          <el-option v-for="item in optionstype" :key="item.id" :label="item.label" :value="item.id"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">添加零件</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                           <el-select v-model="device_db1.part" multiple="multiple">
                          <el-option v-for="item in parts" :key="item.part_id" :label="item.name" :value="item.part_id"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                      <el-row> 
                        <el-col :span="5">导入插件</el-col>
                        <el-col :span="2">:</el-col>
                        <el-col :span="10">
                       <el-upload class="upload-demo" drag action="/action/upload"  :show-file-list="false" :data="upLoadData" :on-success='successHandle' multiple>
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                       </el-upload>
                        </el-col>
                      </el-row>
         </div> 
          </el-card>
        </el-form>
                <div slot="footer" class="dialog-footer">
                 <el-button type="primary" @click="onSubmit">确认添加</el-button>&nbsp;&nbsp;&nbsp;
                <el-button  @click="dialogFormVisible1 = false">取消</el-button>
                </div>
        </el-dialog>
                          <el-button size="mini" type="warning" v-if="scope.row.status=='0'" @click="handleState (scope.$index, scope.row)">禁用</el-button>                   
                          <el-button size="mini" type="success" v-else @click="handleState (scope.$index, scope.row)">恢复</el-button>
             <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
           </template>
        </el-table-column>
      </el-table>
    </div>
</div>
</template>
<script>
import axios from '../plugins/axios'  //在哪里用就在哪里引入
// require('@/mock/device_info.js')
// require('@/mock/device_db_oper.js')
export default {
    data() {
      return {
        device_info: [],
        parts:[],
        device_db:{},
        search: '',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        formLabelWidth: '120px',
        modform:true,
        oper:0,
        device_db1:{
                "name":"",
                "status":"",
                "longitude":"",
                "latitude":"",
                "media":"",
                "serial":"",
                "part":"",
                "size":"",
                "dev_type":"",
                "plugm":"",
            },
            upLoadData:{
                "type":'4'
            },
            optionstype: [{
                    id: 1,
                    label: "测试类型1"
                },
                {
                    id: 2,
                    label: "测试类型2"
                },
                {
                    id: 3,
                    label: "测试单片机"
                }
            ],
             options: [{
                    id: 0,
                    label: "正常"
                },
                {
                    id: 1,
                    label: "异常"
                }
            ],
            optionsmedia: [{
                    id: 1,
                    label: "ftp服务"
                },
                {
                    id: 2,
                    label: "UDP服务"
                }
            ],
        // s:false
      }
    },
    computed:{
    count(){
        var count=0;
        for(let i=0;i<this.device_info.length;i++){
          if(this.device_info[i].status==='0'){
           count++;
         }
        }
        return count;        
      },
      // s(){
      //   for(let i=0;i<this.device_info.length;i++){
      //     if(this.device_info[i].status==0){
      //       this.s=true;
      //     }else{
      //       this.s=false;
      //     }
      //     return s;
      //   }
        
      // }
    },
    created:function(){
        axios.get('/action/devices_info')
        .then(response=>{
            this.device_info=response.data.device_info;
        })
        .catch(error=>{
           console.log(error);
          //  alert('网络错误');
        })
        axios.get('/action/parts_info') //关联零件
        .then(response=>{
            this.parts=response.data.part_info;
        })
        .catch(error=>{
           console.log(error);
          //  alert('网络错误');
        }) 

       
    },
    methods: {
      successHandle(){},
      //添加设备
      onSubmit() {
         this.device_db1.oper='5'
        axios.post('action/devices_db_oper',this.device_db1)
        .then(response=>{
          if(response.data===0){
              this.$message({
                          message: '添加成功',
                          type: 'success'
              });
               axios.get('/action/devices_info')
                .then(response=>{
                 this.device_info=response.data.device_info;
               })
            this.modform=true;
            this.dialogFormVisible1 = false;
          }
        })
        .catch(error=>{
           console.log(error);
           this.$message.error('网络错误，请联系管理员！');
        })
      },
      //过滤筛选的方法
        filterHandler(value, row, column) {

        const property = column['property'];
        return row[property] === value;
      },
        //对列的处理
        formatName: function (row, column) {
            return row.status == '0' ? '正常' : row.status == '1' ? '异常' : '';
        },
        //过滤筛选的方法
        filterHandler1(value, row, column) {

        const property = column['property'];
        return row[property] === value;
      },
        //对列的处理
        formatName1: function (row, column) {
            return row.type == '1' ? '测试类型1' : row.type == '2' ? '测试类型2' : row.type == '3' ? '测试单片机':'';
        },
      //保存修改发送pot请求
      saveModform(){
        this.device_db.oper='2'
         axios.post('/action/devices_db_oper', this.device_db)
        .then(response=>{
          
          if(response.data===0){
              this.$message({
                          message: '修改成功',
                          type: 'success'
              });
               axios.get('/action/devices_info')
                .then(response=>{
                 this.device_info=response.data.device_info;
               })
            this.modform=true;
            this.dialogFormVisible = false;
          }
          
        })
        .catch(error=>{
           console.log(error);
           this.$message.error('网络错误，请联系管理员！');
        })
      },
      indexMethod(index) {
        for(let i=0;i<device_info.length;i++)
        {
          index=this.device_info[i].id;
        }
        return index;
      },
      load () {
        //this.count = 2;
      },
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //离线浅红，在线浅蓝
      tableRowClassName({row, rowIndex}) {
        if (row.status === 0) {
          return 'warning-row';
        } else if (row.status === 1) {
          return 'success-row';
        }
        return '';
      },
      Search(index, row) {
        console.log(index, row);
      },
      //添加设备
        addTask() {
            this.dialogFormVisible1 = true;
            // this.form1={

            // }
        },
      //详情
      handleEdit(index, row) {
        this.dialogFormVisible = true;
        let _this=this
          axios.post('/action/devices_db_oper',{
            "oper": '0',
            "id": row.id           
         })
        .then(response=>{
            console.log(this.response);
            this.device_db=response.data.device_db;
            console.log(this.device_db);
             this.dialogFormVisible = true;
        })
              .catch(error=>{
              console.log(error);
              this.$message.error('网络错误，请联系管理员！');
        })
      },
      //禁用恢复
      handleState(index,row){
            axios.post('/action/devices_db_oper',{
            "oper": '3',
            "id": row.id,
            "status" :row.status       
         })
        .then(response=>{
          if(response.data.status==='1'){
             this.$message({
                          message: '禁用成功',
                          type: 'success'
              });
          }
           if(response.data.status==='0'){
             this.$message({
                          message: '恢复成功',
                          type: 'success'
              });
          }
            axios.get('/action/devices_info')
            .then(response=>{
                this.device_info=response.data.device_info;
            })

        })
              .catch(error=>{
              console.log(error);
              this.$message.error('网络错误，请联系管理员！');
        })
        },
        //删除
      handleDelete(index, row) {
        axios.post('/action/devices_db_oper',{
            "oper": '1',
            "id": row.id,    
         })
        .then(response=>{
           if(response.data===0){
             this.$message({
                          message: '删除成功',
                          type: 'success'
                     });
             axios.get('/action/devices_info')
             .then(response=>{
            this.device_info=response.data.device_info;
             })
           }
        })
              .catch(error=>{
              console.log(error);
              this.$message.error('网络错误，请联系管理员！');
        })
      }
    }
    }
</script>
<style scoped>
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

.head{
    position: absolute;
    top: 15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    line-height: 40px;
    border: 1px solid black;
}
.button{
    position:absolute;
    left: 90%;
}
.body{
    position:absolute;
    left: 14.5%;
    width: 82%;
    top:23%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
}
.el-select{
  width: 250px;
}
.el-input{
  width: 250px;
}

</style>


